<template>
    <div class="orderMailList mailList applyList">
        <Form ref="queryForm" :model="queryForm" inline :label-width="140" class="search-form rui-query-form">
            <div class="applyQuerySearchRow">
                <div class="applyQueryHead">
                    <Button @click="addFareMail()" type="primary" class="btn" size="default">新增运单邮寄</Button>
                </div>
                <div class="applyQuerySearchItem">
                    <Form-item label="" prop="socUniCrtCode">
                        <div>
                            <Input prefix="ios-search" type="text" v-model="queryForm.custom" @keyup.enter.native="handleSearch" clearable placeholder="申请编号/客户名称"/>
                            <a :style="{display:'block',width:'40px',lineHeight: '24px',marginLeft: '16px'}"  @click="dropDown">
                                {{dropDownContent}}
                                <Icon :type="dropDownIcon"></Icon>
                            </a>
                        </div>
                    </Form-item>
                </div>
            </div>
            <div v-if="drop" class="applyQuerySearchMore table-card">
                <div  class="applyQuerySearchMoreRow">
                    <div class="rui-query-form-item">
                        <FormItem label="案件类别" prop="category">
                            <Select v-model="queryForm.category" placeholder="请选择">
                                <Option :value="item.code" v-for="(item,index) in categoryList" :key="index" >{{item.name}}</Option>
                            </Select>
                        </FormItem>
                    </div>
                </div>
                <div style="text-align: center">
                    <Button @click="handleSearch" type="primary">查询</Button>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <Button @click="handleReset">重置</Button>
                </div>
            </div>
        </Form>
        <div class="table-card">
            <div class="btn-status flex flex-between">
                <div class="loanApplyBtn">
                    <Button v-for="(item,index) in statusList" :key="index" @click="queryDocList(item.code)"  :class="activeBtn === item.code ? 'activeBtn btn' :'btn'" size="default">{{item.name}}</Button>
                </div>
            </div>
            <div class="rui-table-box">
                <Table stripe :columns="mailColumns" :data="mailList">
                    <template slot-scope="{ row, index }" slot="action">
                        <div class="btn-no-border">
                        <!-- <Button type="primary" >
                            无实物邮寄
                        </Button> -->
                        <Button ghost type="primary" @click="linkDetail(row)">
                            邮寄详情
                        </Button>
                        <Button ghost type="primary" @click="delayApply(row)" :disabled="row.statusFile==3 || row.statusFile==5">
                            延期申请
                        </Button>
                        </div>
                    </template>
                    <template slot-scope="{ row, index }" slot="statusfilename">
                        <Badge v-if="row.statusfilename==='全部归档'" text="全部归档" color="#67c23a"/>
                        <Badge v-else-if="row.statusfilename==='归档退回'" text="归档退回" color="#f56c6c"/>
                        <Badge v-else-if="row.statusfilename==='超期'" text="超期" color="#f56c6c"/>
                        <Badge v-else :text="row.statusfilename" color="#999"/>
                    </template>
                </Table>
            </div>
            <br/>
            <Row type="flex" justify="end">
                <Page :current="pageData.pageNumber" :transfer="true" :total="pageData.total" :page-size="pageData.pageSize" @on-change="changePage"
                      @on-page-size-change="changePageSize" :page-size-opts="pageSizeOpts" size="small" show-total
                      show-elevator show-sizer></Page>
            </Row>
        </div>
        <div v-if="isShowWayBill">
            <waybill-model
                @close-model="closeModel"
                @showRegisterMail="showRegisterMail"
                :operType="operType"
                :pcompanyList="pcompanyList"
            ></waybill-model>
        </div>
    </div>
</template>
<script>
     import {
        getDocList,
        getCodes,
        getPostInfo
    } from "_p/afs-apply/api/mail-manage/orderMailList.js";
    import "../../assets/css/base.css";
    import {orderMail} from '_p/afs-apply/assets/js/staticData.js'
    import RegisterMail from "./mail-register/registerMail.vue"
    import waybillModel from "./waybill-model/waybillModel.vue"
    import {getDictDataByType} from "_p/basic/api/admin/datadic.js";
    import getcodeList from "_p/afs-apply/api/mail-manage/json/getcodes.json"
    import getdocList from "_p/afs-apply/api/mail-manage/json/getdoclist.json"
     export default {
        name: "mailList",
        data(){
            return{
                drop: false,
                dropDownContent: "更多",
                dropDownIcon: "ios-arrow-down",
                activeBtn: null, //订单状态按钮
                archiveStatus:"",
                operType:"add",
                isShowWayBill:false,
                queryForm:{
                    category:"",
                    custom:"",
                    // status:"",
                },
                queryFormValiate:{

                },
                pageData:{
                    pageNumber:1,
                    pageSize:10,
                    total:0
                },
                // 案件类别
                categoryList:[],
                // 快递公司
                pcompanyList:[],
                // 归档状态
                statusList:[
                ],
                mailColumns:[
                    {
                        title: '客户姓名',
                        key: 'borrowerName'
                    },
                    {
                        title: '申请编号',
                        key: 'camainNo'
                    },
                    {
                        title:"归档状态",
                        key:"statusfilename",
                        slot: 'statusfilename',
                    },
                    {
                        title:"案件状态",
                        key:"statusName",
                    },
                    {
                        title:"最后邮寄期限",
                        key:"limitDate"
                    },
                    {
                        title:"邮寄到期天数",
                        key:"remainDay",
                        align:"center"
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 300,
                        align: 'center'
                    }

                ],
                mailList:[],
                pageSizeOpts:[10,20,50,100],
            }
        },
        components:{
            RegisterMail,
            waybillModel
        },
        computed: {

        },
        created(){

        },
        mounted(){
            this.initData();
        },
         activated() {
             this.handleSearch();
         },
        methods:{
            initData(){
                let param={
                    obj:{
                        "typeId":"",
                    }
                }
                getCodes(param).then(res=>{
                    if (res.code == "0000") {
                        // 快递公司
                        this.pcompanyList=res.data['00001HKYK9DD40000A23'];
                        // 案件类别
                        this.categoryList=res.data['00001HBTQVYCP0000A0E'];
                        // 归档状态
                        // console.info("数据字典"+JSON.stringify(res.data['00001HKP8G7470000A10']))
                        this.statusList=res.data['00001HKP8G7470000A10']

                        //状态处理
                        let tempArr=[];
                        this.statusList.forEach(item => {
                            if (item.code!='8' && item.code!='7') {
                                tempArr.push(item)
                            }
                        });
                        this.statusList = tempArr;
                    }
                })
            },
            // 查询订单邮寄页面的归档列表
            queryDocList(status){
                this.activeBtn = status;
                // 归档状态有，待归档，部分寄出，全部寄出，部分归档，全部归档等
                //超期的案件会包含待归档的，部分归档的，部分邮寄,归档退回
                this.archiveStatus=status||'';
                let params={
                    category:this.queryForm.category,//案件类别
                    pageIndex:this.pageData.pageNumber,
                    pageSize:this.pageData.pageSize,
                    key:this.queryForm.custom,//申请编号或者客户名
                    status:this.archiveStatus,//归档状态
                }
                // console.log(params,"params-queryDocList")
                getDocList(params).then(res=>{
                    // 当返回成功的时候
                    // let res=getdocList;
                    // console.log(res,"res")
                    if(res.code=="0000"){
                        this.pageData.total=res.data.total;
                        let tempArr=[];
                        res.data.records.forEach((item,index)=>{
                            let obj={
                                cacontractId:item.cacontractId,
                                camainNo:item.camainNo,
                                borrowerName:item.borrowerName,
                                remainDay:item.remainDay,
                                statusFile:item.statusFile,
                                limitDate:item.limitDate,
                                statusfilename:item.refData.statusfilename,
                                statusName:item.refData.statusName
                            }
                            tempArr.push(obj);
                        })
                        this.mailList=tempArr;
                        console.log(this.mailList,"mailList")
                    }
                })
            },
            handleSearch(){
                this.pageData.pageNumber=1;
                this.queryDocList()
            },
            handleReset(){
                this.queryForm.custom="";
                this.$refs['queryForm'].resetFields();
                this.queryDocList();
            },
            // 点击新增运单邮寄按钮
            addFareMail(){
                this.queryPostInfo();
            },
             // 查询最新运单信息
             queryPostInfo(){
                let param={
                }
                getPostInfo(param).then(res=>{
                    if(res.code=="0000"){
                        if(res.data){
                            if(res.data.id){
                                this.afs.newTab(this,'projects/afs-apply/pages/mail-manage/mail-register/registerMail','登记邮寄信息','ios-add',{id:res.data.id},'register-mail',[],true)
                            }else{
                                this.isShowWayBill=true;
                                this.$emit("open-model")
                            }
                        }
                    }
                })
            },
            changePage(number){
                this.pageData.pageNumber=number;
                this.queryDocList();
            },
            changePageSize(size){
                this.pageData.pageSize=size;
                this.queryDocList();
            },
            closeModel(value){
                this.isShowWayBill=value;
            },
            // 保存运单信息
            showRegisterMail(id){
                this.isShowWayBill=false;
                this.afs.newTab(this,'projects/afs-apply/pages/mail-manage/mail-register/registerMail','登记邮寄信息','ios-add',{id:id},'register-mail',[],true)
            },
            //邮寄详情
            linkDetail(row){
                this.afs.newTab(this,'projects/afs-apply/pages/mail-manage/order-mail-detail/orderMailDetail','邮寄详情','ios-add',{row:row},'order-mail-detail',[],true)
            },
            //延期申请
            delayApply(row){
                row.op = "add";
                // console.info("延期申请跳转的值："+JSON.stringify(row))
                row.delayFlage = '0';
                this.afs.newTab(this,'projects/afs-apply/pages/post-loan-filing/delay-mng/delayApply','延期申请','ios-add',row,'delayApply',[],true)
            },
            dropDown() {
                if (this.drop) {
                    this.dropDownContent = "更多";
                    this.dropDownIcon = "ios-arrow-down";
                } else {
                    this.dropDownContent = "收起";
                    this.dropDownIcon = "ios-arrow-up";
                }
                this.drop = !this.drop;
            },
        }
     }
</script>
<style>
.ivu-table .ivu-table-body .archiveStatus span{
    color:#EB9620;
}
</style>
<style scoped>
.page{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.postNo>>>.ivu-form-item-content{
    font-size: 0;
}
.postNo>>>.ivu-form-item-error-tip{
    font-size: 12px;
}
</style>
<style lang="less" scoped>
@import "../../assets/css/applyList.less";
</style>
